<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <?php include("header.php"); ?>
    <body>
        <?php include("subheader.php"); ?>
        <div id="contentbg">
            <div id="contentblank">
                <div id="content">
                    <?php include("contentleft.php");?>
                    <div id="contentmid">

                        <!-- CONTENIDO DE LA PAGINA AQUI -->

                        <div class="midheading">
                            <h2>Centros de Apoyo</h2>
                        </div>

                        <div class="midtxt">
                            <h4> En esta secci&oacute;n usted podr&aacute; Agregar Centros de Apoyo.</h4>
                        </div>

                        <div class="midtxt">
                            <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAUY_IGlNUEaovaU_ASUisLRSLwZiOIK98eAJ25EUrbTFDhMRY9RSM5IslwV118_aY8ymwZJPRIYVC6A"
                            type="text/javascript"></script>
                            <script type="text/javascript">

                                var map;
                                var marker1;
                                var marker2;

                                function initialize() {
                                    if (GBrowserIsCompatible()) {
                                        map = new GMap2(document.getElementById("map"));
                                        map.setCenter(new GLatLng(7.898206, -65.705567), 5);
                                        map.setUIToDefault();
                                        document.form1.agregar.disabled = false;
                                        document.data.fecha.value = "";

                                    }
                                }

                                function mapinicial() {
                                    map.panTo(new GLatLng(7.898206, -65.705567));
                                    map.setZoom(5);
                                }


                                function agregarcentromapa(form1) {
                                    if (GBrowserIsCompatible()) {
                                        //Se crean los globitos y se pone donde presione el mouse

                                        marker1 = new GMarker(new GLatLng(7.898206, -65.705567), {draggable: true});
                                        GEvent.addListener(marker1, 'click', function() {
                                            marker.openInfoWindowHtml(html);
                                        });

                                        map.addOverlay(marker1);
                                        form1.agregar.disabled = true;
                                    }
                                }

                                function listo(form1){
                                    map.removeOverlay(marker1);
                                    marker2 = new GMarker(marker1.getLatLng(),{draggable: false});
                                    map.addOverlay(marker2);
                                    form1.fin.disabled = true;
                                    form1.agregar.disabled =true;
                                    document.data.style.display = "block"
                                }

                                //Se envian los datos del centro
                                function sendData() {
                                    var latlen = marker1.getLatLng();
                                    document.data.lat.value = latlen.lat();
                                    document.data.lng.value = latlen.lng();
                                    document.data.submit();
                                }

                                function validarFecha(form){
                                    var RegExPattern = /((0[1-9])|(1|2)[0-9]|(3(0|1)))\/(0[1-9]|1[0-2])\/([1-9][0-9][0-9][0-9])/;
                                    if ((form.fecha.value.match(RegExPattern)) && (form.fecha.value!='')) {
                                        form.fecha.style.color ="black";
                                        form.enviar.disabled = false;
                                    } else {
                                        form.fecha.style.color ="red";
                                        form.enviar.disabled = true;
                                    }
                                }

                            </script>
                            <body onload="initialize()" onunload="GUnload()">
                                <div id="map" style="width: 450px; height: 350px"></div>
                                <form name="form1">
                                    <br/>
                                    <input name="agregar" type="button" value="Ubicar Centro en Mapa"  onclick="agregarcentromapa(this.form); return false"/>
                                    <input type="button" value="Mapa Inicial" onclick="mapinicial();"/>
                                    <input name="fin" type="button" value="Finalizar" onclick="listo(this.form)"/>
                                </form>
                                <form name="data" method="POST" action ="centroapoyoagregado.php" style="display:none">
                                    <input type="hidden" name="lat"></input>
                                    <input type="hidden" name="lng"></input>
                                    <br/>
                                    <!-->agregar la fecha en el formulario<-->
                                    <table border="0" align="center">
                                        <tr>
                                            <td>Nombre de Centro de Apoyo:</td>
                                            <td><input type="text" name="nombre" size="20" maxlength="60" />
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>Tipo de Centro de Apoyo:</td>
                                            <td><select name="tipo">
                                                    <optgroup label="Seleccione el tipo">
                                                        <option value="Hospital" selected="selected" align="center">Hospital</option>
                                                        <option value="Morgue">Morgue</option>
                                                        <option value="Refugio">Refugio</option>
                                                        <option value="Centro de Acopio">Centro de Acopio</option>
                                                    </optgroup>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Desastre al que apoya:</td>
                                            <td><select name="desastre">
                                                    <optgroup label="Seleccione el tipo">
                                                        <option value="Terremoto" selected="selected" align="center">Terremoto</option>
                                                        <option value="Tsunami">Tsunami</option>
                                                        <option value="Incendio">Incendio</option>
                                                        <option value="Inundacion">Inundacion</option>
                                                        <option value="Deslave">Deslave</option>
                                                    </optgroup>
                                                </select>
                                            </td>
                                        </tr>



                                        <tr>
                                            <td>Fecha del desastre:</td>
                                            <td><input type="text" name="fecha" size="10" maxlength="10" onkeyup="validarFecha(this.form)"/>
                                            </td>
                                        </tr>



                                        <tr>
                                            <td>Capacidad m&aacute;xima del Centro de Apoyo:</td>
                                            <td>
                                                <input type="text" name="capacidad" size="20" maxlength="60" />
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>Ubicacion del Centro de Apoyo:</td>
                                            <td>
                                                <textarea name="Ubicacion" cols="25" rows="3"> </textarea>
                                            </td>
                                        </tr>
                                    </table>
                                    <div align="center">
                                        <br/>
                                        <input type="submit" name="enviar" value="Agregar Centro de Apoyo" onclick="sendData();" disabled/>
                                    </div>
                                </form>
                        </div>
                        <div class="midtxt">
                            <h4> En esta secci&oacute;n usted podr&aacute; Consultar Centros de Apoyo.</h4>
                        </div>
                        <div class="midtxt">
                            <form name="f1" method="POST" action="centroApoyoConsultado.php">
                                <table border="0" align="center">
                                    <tr>
                                        <td align="center">
                                            <p>Tipo de desastre:</p>
                                        </td>
                                        <td align="center">
                                            <select name="tipo">
                                                <optgroup>
                                                    <option value="Terremoto" selected="selected" align="center">Terremoto</option>
                                                    <option value="Tsunami">Tsunami</option>
                                                    <option value="Incendio">Incendio</option>
                                                    <option value="Inundacion">Inundacion</option>
                                                    <option value="Deslave">Deslave</option>
                                                </optgroup>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <p>Fecha</p>
                                        </td>
                                        <td align="center">
                                            <input type="text" name="fecha" size="10" maxlength="10" onkeyup="validarFecha(this.form)"/>
                                        </td>
                                    </tr>
                                </table>
                                <table border="0" align="center">
                                    <tr>
                                        <td align="center">
                                            <input type="submit" name="enviar" value="Consultar Centro" disabled/>
                                        </td>
                                    </tr>
                                </table>
                            </form>
                        </div>
                    </div>
                    <?php include("contentright.php");?>
                </div>
            </div>
        </div>
        <?php include("footer.php");?>
    </body>

</html>
